<template>
  <div class="file">
    <label  class="style-label">
        {{name}}
      <input id="valueFile" :accept="accept" @change="uploadFile" type="file" class="style-input" multiple/>
    </label>
    <div class="waiting" >
      <div class="content" v-if="isloading"></div>  
    </div>
    <ul class="file-lists">
      <li v-for="(item, i) in address" v-if="type!=='single'||address.length-1===i">
        <div class="value" v-if="item.fileName" v-show='!hideValue'>
          <span>附件：</span><a target="_blank" class="ellipsis" :href="GLOBAL.oss+item.path">{{item.fileName}}</a>
          <span class="del-icon" @click="removeFile(i)"></span>
        </div>
      </li>
    </ul>
    <i-modal :msg="'上传成功'" v-if="uploadText.open" @confirm="cancelUpload" @cancel="cancelUpload"/>
  </div>
</template>

<script>
  import fileService from '@/common/service/fileService';
  export default {
    props: ['name', 'hideValue', 'accept', 'type', 'value', 'multiple', 'fileInit'],
    name: 'upload-file',

    data () {
      return {
        isloading: false,
        formData: '',
        address: [],
        uploadText: {
          open: false
        }
      };
    },

    components: {
    },
    beforeMount () {
    },
    mounted () {
      this.init();
    },

    methods: {
      /**
       * 初始化
       */
      init () {
        let vm = this;
        if (vm.fileInit) {
          vm.address = vm.fileInit;
        }
      },
      removeFile (i) {
        let vm = this;
        vm.address.splice(i, 1);
          document.querySelector('.style-input').value = '';
      },
      cancelUpload () {
        this.uploadText.open = false;
      },
      async uploadFile (e) {
        let files = e.target.files,
            i = 0,
            _data,
            vm = this;
            vm.isloading = true;
            vm.formData = new FormData();
            for (; i < files.length; i++) {
              vm.formData.append('files', files[i], [i].name);
              vm.formData.append('files', i);
            }
        if (vm.type === 'project') {
          vm.formData.append('type', vm.$store.state.taskInfo.currentSegment);
          vm.formData.append('businessId', vm.$store.state.taskInfo.id);
          vm.address = await fileService.uploadFileWithBiz(vm.formData);
          vm.address = vm.address.data.data;
        } else {
          _data = await fileService.fileUpload(vm.formData);
          vm.address = vm.address.concat(_data.data.data);
        }
        vm.isloading = false;
        if (vm.hideValue) {
          document.querySelector('.style-input').value = '';
          vm.uploadText.open = true;
        }
        vm.$emit('uploaded', {
          address: vm.address,
          value: vm.value
        });
      }
    }
  };
</script>

<style lang="less" scoped>
  .file{
    display: inline-block;
    width: 380px;
    .value{
      display: inline-block;
      color: #FE6C3B;
      margin-left: 20px;
      font-size: 14px;
      span{
        color: #333;
      }
      a{
        color: #FE6C3B;
      }
    }
    .file-lists{
      display: inline-block;
      vertical-align: top;
      .value{
        a{
          width: 120px;
          display: inline-block;
          &:hover{
            color: red;
          }
        }
      }
    }
    .waiting{
      display: inline-block;
      vertical-align: middle;
        width: 20px;
        height: 20px;
      .content{
        background: url(/static/img/waiting.gif) center center no-repeat;
        width: 20px;
        height: 20px;
        background-size: 20px;
      }
    }
  }
</style>
